Skip to content

Slightly sped up DOM rendering when switching monitors on Watch page#4884

Open
IgorA100 wants to merge 1 commit into
ZoneMinder:masterfrom
IgorA100:patch-481482
Open

Slightly sped up DOM rendering when switching monitors on Watch page#4884
IgorA100 wants to merge 1 commit into
ZoneMinder:masterfrom
IgorA100:patch-481482

Conversation

@IgorA100
Copy link
Copy Markdown
Contributor

@IgorA100 IgorA100 commented Jun 4, 2026

Clearing via textContent is performed without page parsing, which speeds up cleanup.
When executing innerHTML, clearing will first occur by parsing the page, and then assigning new elements.
This will slightly speed up DOM rendering by quickly clearing.

Clearing via textContent is performed without page parsing, which speeds up cleanup.
When executing innerHTML, clearing will first occur by parsing the page, and then assigning new elements.
This will slightly speed up DOM rendering by quickly clearing.
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR aims to speed up UI updates on the Watch page when switching monitors by clearing the main monitor container before injecting new stream markup.

Changes:

  • Clears the #monitor element via textContent = '' before setting innerHTML to the new monitor’s streamHTML.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 946 to 948
//Change main monitor block
monitor_div.textContent = '';
monitor_div.innerHTML = currentMonitor.streamHTML;
@connortechnology
Copy link
Copy Markdown
Member

copilot doesn't like your change. I'm not sure. I'm a little surprised that that would give any noticeable speed increase. Would be nice if we could just say turn off dom updates until we are ready to redraw.... maybe there is a way. I just don't know it.

github has gotten stupid about copilot billing. I'm going to integrate my paid Claude subscription instead.

@IgorA100
Copy link
Copy Markdown
Contributor Author

IgorA100 commented Jun 5, 2026

Would be nice if we could just say turn off dom updates until we are ready to redraw....

I don't yet know what criteria to use to determine whether we're ready for a repaint.
99% of the time, we're ready by default because we've switched to the next monitor. Because if the DOM isn't rendered, playback won't start.
In theory, we don't need a DOM repaint only in one case: when we switch between monitors very quickly (less than 1 second).

copilot doesn't like your change.

I once tested the speed of clearing using textContent = '', and it worked noticeably faster than innerHTML = ''.
I haven't tested it yet, but it seems to me that redrawing has become faster.
In any case, innerHTML = 'ХХХХХХХ' first completely clears the parsing process and only then adds new elements. Considering that we're removing not just one or two DOM elements, but significantly more, there should be a performance benefit.

github has gotten stupid about copilot billing. I'm going to integrate my paid Claude subscription instead.

Heh....
Does each check cost money, or are there unlimited plans for a certain period?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants